<template>
	<view class="bBtn_p_b140">
		<view class="contina w m_t_10">
			<view class="card">
				<u--form labelPosition="left" :model="form" labelWidth="125" ref="form1" borderBottom
					:labelStyle="labelStyle">
					<u-form-item label="持证人" prop="form.staff_id" borderBottom @click="showAction(1)">
						<u--input v-model="form.staff.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择持证人" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="证书名称" prop="form.certification_type_id" borderBottom @click="showAction(2)">
						<u--input v-model="form.certification_type.name"
							placeholder-style="text-align: right;color:#999999" disabledColor="#ffffff"
							placeholder="请选择证书名称" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="专业名称" prop="form.major_id" borderBottom @click="showAction(3)">
						<u--input v-model="form.major.name" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" placeholder="请选择专业名称" border="none" inputAlign="right">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="证书编号" prop="form.no" borderBottom ref="item1">
						<u--input v-model="form.no" border="none" placeholder-style="text-align: right;color:#999999"
							inputAlign="right" placeholder="请输入证书编号"></u--input>
					</u-form-item>
					<u-form-item label="费用类别" prop="form.type" borderBottom @click="showAction(4)">
						<u--input v-model="show_type" placeholder-style="text-align: right;color:#999999"
							disabledColor="#ffffff" inputAlign="right" placeholder="请选择费用类别" border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item label="维护金额" prop="form.fee" borderBottom ref="item1">
						<u--input v-model="form.fee" border="none" placeholder-style="text-align: right;color:#999999"
							inputAlign="right" placeholder="请输入维护金额"></u--input>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<flooterCom>
			<template #btn>
				<view class="flex_a_c" style="justify-content: space-around;">
					<view class="cale btns" @click="back">取消</view>
					<view class="save btns" @click="submit">保存</view>
				</view>
			</template>
		</flooterCom>
		<u-picker :show="show2" :columns="actions" @cancel="show2=false" @confirm="selectAction"
			keyName="name"></u-picker>
	</view>
</template>

<script>
	import flooterCom from "@/compoment/flooterCom.vue"
	export default {
		data() {
			return {
				labelStyle: {
					display: 'flex',
					justifyContent: 'spaceBetween'
				},
				show2: false,
				actions: [],
				datetime: '',
				op1: [],
				op2: [],
				op3: [],
				op4: [{
						value: 1,
						name: '考前培训'
					},
					{
						value: 2,
						name: '继续教育'
					}
				],
				actionType: 1,
				show_type: '',
				form: {
					staff_id: 0,
					certification_type_id: 0,
					major_id: 0,
					no: '',
					type: '',
					fee: '',


					staff: {
						name: ''
					},
					certification_type: {
						name: ''
					},
					major: {
						name: ''
					},
				},
			}
		},
		components: {
			flooterCom
		},
		onLoad(option) {
			this.edit = option.edit
			if (this.edit == 1) {
				this.getDetail(option.id)
			}
			uni.setNavigationBarTitle({
				title: this.edit == 1 ? '编辑人才证书维护' : '新增人才证书维护'
			})
		},
		created() {
			this.$api.homeApi.getStaff().then(res => {
				this.op1 = res.list
			})
			this.$api.homeApi.getCertificationType().then(res => {
				this.op2 = res.list
			})
			this.$api.homeApi.getMajor().then(res => {
				this.op3 = res.list
			})
		},
		methods: {
			async getDetail(id) {
				this.form = await this.$api.staffCertificateMaintenanceApi.detail({
					id: id
				})
				if (this.form.status === 1) {
					this.show_type = '考前培训';
				} else {
					this.show_type = '继续教育';
				}
			},
			selectAction(e) {
				let v = e.value[0]
				if (this.actionType == 1) {
					this.form.staff_id = v.id
					this.form.staff.name = v.name
				}
				if (this.actionType == 2) {
					this.form.certification_type_id = v.id
					this.form.certification_type.name = v.name
				}
				if (this.actionType == 3) {
					this.form.major_id = v.id
					this.form.major.name = v.name
				}
				if (this.actionType == 4) {
					this.form.type = v.value
					this.show_type = v.name
				}
				this.show2 = false
			},
			showAction(type) {
				this.actionType = type
				this.actions = []
				if (type == 1) {
					this.actions.push(this.op1)
				}
				if (type == 2) {
					this.actions.push(this.op2)
				}
				if (type == 3) {
					this.actions.push(this.op3)
				}
				if (type == 4) {
					this.actions.push(this.op4)
				}
				this.show2 = true
			},
			back() {
				uni.navigateBack()
			},
			async submit() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				})
				try {
					if (this.edit == 1) {
						await this.$api.staffCertificateMaintenanceApi.update(this.form)
					} else {
						await this.$api.staffCertificateMaintenanceApi.add(this.form)
					}
					this.$fun.tipBack('保存成功')
				} catch (e) {
					//TODO handle the exception
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss">
	.contina {
		::v-deep .u-form-item__body {
			padding: 30rpx 0 !important;

			.u-form-item__body__right__content__slot {
				display: flex;
				align-items: flex-end;
			}

			text-align: right;

			.par_upload {
				width: 100rpx;
				height: 100rpx;

				.u-upload__button {
					width: 100rpx !important;
					height: 100rpx !important;
				}
			}
		}

		::v-deep .u-form-item__body__left__content__label {
			justify-content: space-between !important;
			width: 100%;
		}
	}

	.btns {
		width: 330rpx;
		height: 90rpx;
		border-radius: 10px 10px 10px 10px;
		line-height: 90rpx;
		text-align: center;
		border-radius: 10px 10px 10px 10px;
	}

	.cale {
		color: #FF0000;
		border: 1px solid #F07878;
	}

	.save {
		color: #fff;
		background-color: #0074FF;
	}
</style>